<template>
  <div class="repeat">
    <el-card>
      <div slot="header" class="clearfix">
        <span>重复商品检测</span>
        <span class="header-tip">此功能只是帮助你快速检测标题，编码重复的商品</span>
      </div>
      <div :class="{'has-result': hasResult}">
        <el-row v-if="hasResult" justify="start" type="flex">
          <div class="goods" />
          <div class="goods-result">
            <div>铺货检测结果：发现 1699 组重复商品</div>
            <div class="goods-result-time">检测结果于2024-07-05 15:1</div>
          </div>
        </el-row>
        <div class="">
          <el-form
            :model="form"
            size="small"
            label-width="90px"
            label-position="left"
          >
            <el-form-item label="商品状态">
              <el-radio-group v-model="form.is_custom_freight">
                <el-radio :label="false">全部</el-radio>
                <el-radio :label="true">在售</el-radio>
                <el-radio :label="true">已下架</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标题相似度">
              <el-radio-group v-model="form.is_custom_freight">
                <el-radio :label="false">完全一样(很快)</el-radio>
                <el-radio :label="true">90%以上(很慢)</el-radio>
                <el-radio :label="true">80%以上(很慢)</el-radio>
                <el-radio :label="true">不检测</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="标题相似度">
              <el-checkbox v-model="form.repeat">相同商品编码视为重复商品</el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <div>
          <el-button>{{ hasResult ? '重复检测' : '立即检测' }}</el-button>
          <span v-if="hasResult">收起检测条件</span>
        </div>
      </div>
      <el-row v-if="hasResult">
        <el-button>下架</el-button>
        <el-button>删除选中</el-button>
        <el-button />
      </el-row>

      <el-table v-if="hasResult">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="name"
          label="水印信息"
        />
        <el-table-column
          prop="name"
          label="水印图片"
          width="238"
        />
        <el-table-column
          prop="name"
          label="投放状态"
          width="330"
        />
        <el-table-column
          fixed="right"
          prop="name"
          label="操作"
          width="230"
        >
          <!-- eslint-disable-next-line -->
          <template slot-scope="scope">
            <div class="">编辑</div>
            <div class="">退出/投放记录</div>
            <div class="">追加投放</div>
            <el-popover
              placement="top-start"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <div slot="reference" class="">
                <div class="">退出并删除水印模板</div>
                <div class="">退出水印(保留模板)</div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="">
      <el-pagination
        style="float: right;"
        background
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="1000"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      hasResult: false
    }
  }
}
</script>

<style lang="scss" scoped>
.repeat {
  padding: 12px 20px 0;
  .list-form,
  .list-table {
    padding: 20px 20px 0;
    border-radius: 4px 4px 0 0;
  }
  .header-tip {
    margin-left: 20px;
    font-size: 14px;
    color: #999999;
  }
  .has-result {
    margin-bottom: 10px;
    padding: 20px;
    background: linear-gradient( 180deg, rgba(248,0,0,0.08) 0%, rgba(238,0,0,0) 100%);
  }
  .goods {
    width: 80px;
    height: 80px;
    background: #D8D8D8;
    border-radius: 8px;
  }
  .goods-result {
    margin-left: 12px;
    font-weight: 500;
    font-size: 14px;
    color: #000000;
    line-height: 20px;
    &-time {
      margin-top: 12px;
      color: #999999;
    }
  }
  .el-form-item--small {
    margin-bottom: 10px!important;
  }
}
</style>
